<!DOCTYPE html>
<html>
<head>
<base href="https://krishan.ml" target="_blank">
<meta charset="UTF-8">
<meta name="theme-color" content="black"/>
<meta name="msapplication-TileColor" content="#da532c"/>
<meta name="msapplication-navbutton-color" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Text Replacer</title>


<style>				
*{
box-sizing: border-box;
margin:0; padding:0; 
outline: none;
font-family: Arial;
}	

body{
background: rgb(251,244,234) url("/resources/metaltexture.jpg");
//background-size: 0%;
min-width: 100vw;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}

#container{
border: 0px solid red;
margin-top: 20px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-transform: lowercase;
font-variant: small-caps;
}


#prefix,#input,#suffix,#output{
padding: 5px;
font-size: 14px;
border: 1.5px solid gray;
background: rgb(255,255,255,0.3);
}

#input,#output{
width:100%; height:300px;				
}


#prefix,#suffix{
width:100%; height: 30px;				
}



#block1,#block3{
position: relative;
width: 100%;
display:flex;
flex-direction:column;
align-items: center;
margin-bottom: 10px;				
}

#block2,#block4{
position: relative;
width: 100%;		
display:flex;
flex-direction:column;
align-items: center;
margin-bottom: 10px;
}


#block5{
width: 100%; height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -1.5px;
}

#copy,#submit{
width: 8ch; height: 100%;
border: 1.5px solid gray;
background: darkgray;
text-transform: lowercase;
font-variant: small-caps;
}

#copy{right: 0px; }
#submit{left: 0px; }


#block6{
width: 100%; height: 30px;
display: flex;
font-size: 12px;
justify-content: center;
align-items: flex-start;
margin-top: -1.5px;
}


::placeholder{
font:13px "Courier New";				
}


#fontsize{
-webkit-appearance: none;
width: 40%; height: 5px;
background: white;
border: 1px solid black;
border-radius: 5px;
}
 
#fontsize::-webkit-slider-thumb{
-webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent;
width: 10px; height: 10px; border-radius: 50%;
background: black; cursor: pointer;
}
 
#fontsize::-moz-range-thumb {
-webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent;
width: 10px; height: 10px; border-radius: 50%;
background: black; cursor: pointer;
}


.checkbox{
position: absolute;
top:0; right:0;				
}


.switch{
display:inline-flex;
height: 1em; width:1em;
border: 1px solid black;
}

.switch>svg{
stroke: black; stroke-width: 2;
max-height:100%; max-width:100%;
}

.multi{
height: 300px!important;				
}

@media (orientation:portrait){
#container{
width: 95%; height: auto;
}			
}	

@media (orientation:landscape){
#container{
width: 75%; height: auto;
}			
}	

</style>
</head>
<body>
<div id="container">
				
<div id="block1">
<span class="label">Suffix</span>
<div class="checkbox">
   		<span>multiline</span>	
     <span id="premult" class="switch"></span>
</div>						
<textarea id="prefix"></textarea>
</div> 
 
<div id="block2">
	<span class="label">Input</span>									
  <textarea id="input"></textarea>
</div>

<div id="block3">
<span class="label">Prefix</span>	
<div class="checkbox">
    	<span>multiline</span>	
     <span id="sufmult" class="switch"></span>	
</div>				
<textarea id="suffix"></textarea>
</div> 

<div id="block4">
	<span class="label">Output</span>	
  <textarea id="output" readonly></textarea>
</div>

<div id="block5">
	 <button id="submit">Submit</button>
	 <input  id="fontsize" type="range" value="14" min="8" max="20" step="1">
  <button id="copy">Copy</button>
</div>

<div id="block6">
Font size:&nbsp;<span class="fontsize">14</span>px
</div>
    					
</div>
<script>				
let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);

let
prefix= select("#prefix"),
input= select("#input"),
suffix= select("#suffix"),
output= select("#output"),
submit= select("#submit"),
copy= select("#copy");


let on= `<svg viewBox="0 0 24 24"><path d="M20 20L4 4m16 0L4 20"/></svg>`;
//-------

function long(a,b,c){
a.classList.toggle("multi");
if (a.className=="multi"){
b.style.background= "white";
b.innerHTML= on;
c= true;
}
else{
b.innerHTML="";
b.style.background= "none";
c= false;
}			
}


let premult, sufmult;

select("#premult").onclick= function(){
long(prefix,this,premult);				
};

select("#sufmult").onclick= function(){
long(suffix,this,sufmult);				
};


function update(){
let one= (premult) ? prefix.value.split("\n") : prefix.value;
				
}




//------------------------------------------------
let fontsize= select("#fontsize");
fontsize.oninput= function(){
input.style.fontSize= this.value + "px";
output.style.fontSize= this.value + "px";
select(".fontsize").innerHTML= this.value;
};

/*------------------------------------------



go.onclick= function(){
output.value= "";
copy.innerHTML= "Copy"
submit.innerHTML= "Submit"
submit.style.width= "8ch";

};

*/

//-------------------------------------------------
copy.onclick= function(){
if(output.value.match(/\S/)){
if(!navigator.clipboard){
output.select();
document.execCommand("copy");
this.innerHTML= "Copied";
}else{
navigator.clipboard.writeText(output.value);
this.innerHTML= "Copied";
}
}
};

//--------
submit.onclick= function(){
if(output.value.match(/\S/)){
this.innerHTML= "Submitted";
this.style.width= "10ch";
input.value= output.value;
output.value= "";				
}
};
//-------------------------------------------------





input.placeholder= "Enter your input data/text here";	
output.placeholder= "The result will be shown here!";		
</script>
</body>
</html>
